<template>
	<view class="container">
		<view style="padding: 28rpx 36rpx;background-color: #fff;" class="search">
			<up-search placeholder="请输入搜索内容" :showAction="false" v-model="data.searchQuery" ></up-search>
		</view>
		<!-- 分类与 FAQ 列表 -->
		<scroll-view scroll-y :style="{height: data.scrollViewHeight + 'px'}">
			<view v-for="(category, index) in filteredFaqs" :key="index" class="category-section">
				<view class="category-title">{{ category.title }}</view>
				<view 
					v-for="(faq, idx) in category.items" 
					:key="idx" 
					class="faq-item"
					@click="navigateToDetail(faq)"
				>
					<text class="faq-question">{{ faq.question }}</text>
				</view>
			</view>
		</scroll-view>
		<view class="AI-style" @click="onNavCoze">
			<image src="https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze/chatsdk-logo.png" mode=""></image>
		</view>

		<!-- 返回顶部按钮 -->
<!-- 		<view v-if="data.showBackTop" class="back-top" @click="scrollToTop">
			回到顶部 ↑
		</view> -->
	</view>
</template>

<script setup>
import { computed, reactive } from 'vue';
import {onLoad,onReady,onShow} from "@dcloudio/uni-app";
	
	const data = reactive({
		searchQuery: '',
		scrollViewHeight: 0,
		showBackTop: false,
		faqs: [
			{
				title: '常见问题',
				items: [
					{ question: '如何挂号？', answer: '打开应用，单点菜单击门诊挂号 → 选择科室 → 选择挂号类型 → 进入挂号页面 → 选择医生点击挂号 → 进入挂号详情点击挂号示即可。' },
					{ question: '如何查看医生排班？', answer: '打开应用，单点菜单医生排班 → 进去医生排班页面，如果只需要查看今日排班直接看首页医生列表即可。' },
					{ question: '如何查看挂号记录？', answer: '打开应用，单点菜单门诊记录 → 进去门诊记录页面'  }
				]
			},
			{
				title: '其他帮助',
				items: [
					{ question: '如何返回意见？', answer: '打开应用，进入我的页面 → 点击意见反馈按钮 → 进入意见反馈页面提交反馈意见即可' },
				]
			}
		]
	})
	const filteredFaqs = computed(() => {
		if (!data.searchQuery) return data.faqs;
		const query = data.searchQuery.toLowerCase();
		return data.faqs.map(category => ({
			title: category.title,
			items: category.items.filter(faq => faq.question.toLowerCase().includes(query))
		}));
	})

	onReady(() => {
		
		// 获取屏幕高度，动态计算 scroll-view 高度
		const systemInfo = uni.getSystemInfoSync();
		data.scrollViewHeight = systemInfo.windowHeight - 100; // 减去 navBar 和 searchBox 的高度
	}) 
	
	
	function navigateToDetail(faq) {
		uni.navigateTo({
			url: '/view/user/helpCenter/detail/index?faq=' + encodeURIComponent(JSON.stringify(faq))
		});
	}
	function scrollToTop() {
		// scroll-view 不支持 scrollTop，所以需要借助插件或原生组件
		// 此处仅为示意
		console.log('Scroll to top');
	}
	
	function onNavCoze() {
		uni.navigateTo({
			url: '/view/user/coze/index'
		});
	}

</script>

<style lang="scss">
.container {
	background-color: #f9f9f9;
}

.search-box {
	padding: 20rpx;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

input {
	height: 60rpx;
	padding: 0 20rpx;
	border-radius: 8rpx;
	background-color: #f0f0f0;
}

.category-section {
	margin-top: 40rpx;
	background-color: #fff;
	padding: 20rpx;
}

.category-title {
	font-weight: bold;
	font-size: 32rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.faq-item {
	padding: 20rpx 0;
	border-bottom: 1px solid #eee;
}

.faq-question {
	font-size: 28rpx;
	color: #333;
}

.back-top {
	position: fixed;
	right: 40rpx;
	bottom: 100rpx;
	width: 100rpx;
	height: 100rpx;
	background-color: #07c160;
	color: white;
	text-align: center;
	line-height: 100rpx;
	border-radius: 50%;
	z-index: 999;
}
.AI-style {
	position: fixed;
	right: 20rpx;
	bottom: 30%;
	transition: transform 0.5s ease; /* 定义过渡效果 */
	
	image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 500rpx;
	}
	
	&:active {
	  transform: scale(0.9);
	  transform-origin: center center; /* 缩放中心点在左上角 */
	}
}
</style>